<template>
	<view class="uni-flex uni-flex-item uni-column">
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in productList" :key="key">
				<view class="uni-media-list">
					<image class="uni-media-list-logo" :src="item.img"></image>
					<view class="uni-media-list-body">
						<view class="uni-ellipsis-2">{{item.title}}</view>
						<view>{{item.seller_count}}</view>
						<view style="width: 100%; justify-content: space-between;">
							<view>
								<view>￥{{item.price/100}}</view>
								<view class="uni-text-discount uni-text-red">￥{{item.origin_price/100}}</view>
							</view>
							<view>
								<button type="warn" size="mini" :data-product="item" @tap="buy">购买</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loadMore" v-if="showLoadMore" @tap="getproductList()">{{loadMoreText}}</view>
	</view>
</template>

<script>
	var self;
	export default {
		data: {
			shopId: '682731',
			productList: [],
			page: 0,
			loadMoreText: "加载更多...",
			showLoadMore: true,
			hasMore: true,
		},
		onLoad: function() {
			self = this;
			//尝试加载第一页数据
			this.getproductList();
		},
		onUnload: function() {
			this.loadMoreText = "加载更多...";
			this.showLoadMore = false;
			this.hasMore = false;
		},
		onReachBottom() {
			console.log("onReachBottom");
			if (this.hasMore === false) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			//加载下一页数据
			this.getproductList();
		},

		methods: {
			getproductList() {
				if (this.hasMore) {
					this.page = this.page + 1;
				} else {
					//没有更多数据了
					return;
				}
				const api = 'https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list';
				let url = `${api}&page=${this.page}&shop_id=${this.shopId}`;
				console.log(url);

				uni.request({
					url: url,
					success: (res) => {
						const data = res.data;
						console.log(JSON.stringify(data));

						self.hasMore = data.has_more;
						//追加数据
						self.productList = self.productList.concat(data.shop_products)
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			buy(e) {
				// console.log(e);				
				let product = e.target.dataset.product;
				console.log(product)
				let api = `https://m.beidian.com/detail/detail.html?iid=${product.iid}&shop_id=${this.shopId}`;

				//#ifdef APP-PLUS
				plus.runtime.openURL(api);
				//#endif

				//#ifdef MP-WEIXIN
				uni.setClipboardData({
					data: api,
					success: function() {
						uni.showModal({
							title: '提示',
							content: '链接已复制，请在浏览器中访问',
							showCancel: false,
						});
					}
				})
				//#endif
			}
		},
	}
</script>

<style>
	page view {
		display: flex;
		flex-direction: row;
	}

	.uni-media-list-logo {
		height: 200upx;
		width: 200upx;
	}

	.uni-media-list-body {
		font-size: 30upx;
		height: 200upx;
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.loadMore {
		text-align: center;
		line-height: 100upx;
		font-size: 30upx;
		justify-content: center;
		align-items: center;
	}
</style>
